// @ts-check
import React, { useEffect, useMemo, useState } from 'react'
import styles from './style.less'
import cs from 'classnames'
import { usePlayerStateSelector } from '../../store'
const album_placeholder = 'https://y.qq.com/mediastyle/yqq/extra/player_cover.png?max_age=31536000'


/** @type {React.FC<import('./type').VisualizationProps>} */
const Visualization = ({
  containerClassName,
  musicDetail
}) => {
  const audioInstance = usePlayerStateSelector(state => state.audioInstance)
  
  /** @type {[import('./type').Mode, React.Dispatch<React.SetStateAction<import('./type').Mode>>]} */
  const [mode, setMode] = useState()

  useEffect(() => {
    if(musicDetail) {
      if(musicDetail.songs[0]?.al?.picUrl) {
        setMode('image')
      }
    }
  }, [musicDetail])

  
  // useEffect(() => {
  //   if(mode === 'visualization') {
  //     if(audioInstance) {
  //       /** @type {AudioContext} */
  //       // @ts-ignore
  //       const audioCtx = new(window.AudioContext || window.webkitAudioContext)()
  //       const source = audioCtx.createMediaElementSource(audioInstance)
  //       const analyser = audioCtx.createAnalyser()
  //     }
  //   }
  // }, [mode, audioInstance])


  return (
    <div className = {cs(styles['visualization'],containerClassName)}>
      {
        !mode || mode === 'image' ?
          <div className = {styles['imageMode']}>
            <img src={musicDetail?.songs[0]?.al?.picUrl || album_placeholder }/>
          </div>: null
      }
     
      <div className = { styles['changeMode'] }>
        
      </div>
    </div>
  )
}

export default Visualization
